<script setup lang="ts">
import { ref,onMounted } from 'vue'
import axios from 'axios'
import type {category} from "@/type/category.ts";

const tableDate=ref<category[]>([])
const formdata=ref({
  cId:'',
  cName:'',
  cIcon:'',
  issSale:'',
})

onMounted(()=>{
  axios.get('http://localhost:8080/goods/getCategory').then(res=>{
    tableDate.value=res.data.data
  })
})
const switchChang=(row:any)=>{
  axios.post('http://localhost:8080/goods/changeCategoryStatus',row).then(res=>{
    if  (res.data.code===200){
      alert('修改成功')
    }
  })
}
const updatecenterDialogVisible = ref(false);
const openUpdateDialog = (row:any) => {
  updatecenterDialogVisible.value = true
}

const handleUploadSuccess = (response: any) => {
  formdata.value.cIcon = response.msg;
  axios.post('http://localhost:8080/user/register',formdata.value).then(res=>{
  })
};
const handleUploadError = (error: any) => {
  console.log(error);
};
const handleSubmit = () => {
  console.log(formdata.value)
  axios.post('http://localhost:8080/goods/insert',formdata.value).then(res=>{
    if  (res.data.code===200){
      alert('添加成功')
    }
  })
};


</script>

<template>
  <el-button type="primary" @click="openUpdateDialog">添加分类</el-button>
  <el-table :data="tableDate" style="width: 100%">
    <el-table-column prop="cid" label="编号" />
    <el-table-column prop="cname" label="分类名" />
    <el-table-column prop="cicon" label="图标" />
    <el-table-column prop="issale" label="开启状态">
      <template #default="scope">
        <el-switch
            v-model="scope.row.issale"
            :active-value="1"
            :inactive-value="0"
            @change="switchChang(scope.row)"
        />
      </template>
    </el-table-column>
  </el-table>
  <el-dialog class="shop-dialog" v-model="updatecenterDialogVisible" title="Warning">
    <template #header>
      <span>详情</span>
    </template>
    <template #default>
      <el-form label-width="100px" :model="formdata">
        <el-form-item label="分类名称">
          <el-input v-model="formdata.cName"/>
        </el-form-item>
        <el-form-item label="图标">
          <el-upload
              ref="uploadRef"
              class="upload-demo"
              drag
              :auto-upload="false"
              :limit="1"
              :on-success="handleUploadSuccess"
              :on-error="handleUploadError"
              action='http://localhost:8080/user/uploadusertouxiang'
              multiple>
            <el-icon class="el-icon--upload"><upload-filled/></el-icon>
            <div class="el-upload__text">
              拖拽头像至此<em>点击上传</em>
            </div>
            <template #tip>
              <div class="el-upload__tip">
                图片大小小于500kb
              </div>
            </template>
          </el-upload>
        </el-form-item>
      </el-form>
    </template>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="updatecenterDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="updatecenterDialogVisible = false; handleSubmit()">添加</el-button>
      </div>
    </template>
  </el-dialog>

</template>
<style scoped>
</style>
